<script lang="tsx">
import { PropType, ref, Ref } from 'vue'
import { computed, defineComponent, toRefs, unref } from 'vue'
import type { FormActionType, FormProps, FormSchema } from '../types/form'
import type { ValidationRule } from 'ant-design-vue/lib/form/Form'
// import type { TableActionType } from '/@/components/Table';
import { Col, Divider, FormModel } from 'ant-design-vue'
import { componentMap } from '../componentMap'
import { BasicHelp } from '/@/vbenComponents/Basic'
import { isBoolean, isFunction, isNull } from '/@/utils/is'
import { getSlot } from '/@/utils/helper/tsxHelper'
import { createPlaceholderMessage, setComponentRuleType } from '../helper'
import { cloneDeep, upperFirst } from 'lodash-es'
import { useItemLabelWidth } from '../hooks/useLabelWidth'
import { useI18n } from '/@/hooks/web/useI18n'

export default defineComponent({
  name: 'BasicFormItem',
  inheritAttrs: false,
  props: {
    schema: {
      type: Object as PropType<FormSchema>,
      default: () => ({}),
    },
    formProps: {
      type: Object as PropType<FormProps>,
      default: () => ({}),
    },
    allDefaultValues: {
      type: Object as PropType<Recordable>,
      default: () => ({}),
    },
    formModel: {
      type: Object as PropType<Recordable>,
      default: () => ({}),
    },
    setFormModel: {
      type: Function as PropType<(key: string, value: any, schema: FormSchema) => void>,
      default: null,
    },
    tableAction: {
      type: Object as PropType<any>,
    },
    // tableAction: {
    //   type: Object as PropType<TableActionType>,
    // },
    formActionType: {
      type: Object as PropType<FormActionType>,
    },
    isAdvanced: {
      type: Boolean,
    },
  },
  setup(props, { slots }) {
    const { t } = useI18n()

    const { schema, formProps } = toRefs(props) as {
      schema: Ref<FormSchema>
      formProps: Ref<FormProps>
    }

    const fieldRef = ref<ElRef>(null)

    const itemLabelWidthProp = useItemLabelWidth(schema, formProps)

    const getValues = computed(() => {
      const { allDefaultValues, formModel, schema } = props
      const { mergeDynamicData } = props.formProps
      return {
        field: schema.field,
        model: formModel,
        values: {
          ...mergeDynamicData,
          ...allDefaultValues,
          ...formModel,
        } as Recordable,
        schema: schema,
      }
    })

    const getComponentsProps = computed(() => {
      const { schema, tableAction, formModel, formActionType } = props
      let { componentProps = {} } = schema
      if (isFunction(componentProps)) {
        componentProps = componentProps({ schema, tableAction, formModel, formActionType }) ?? {}
      }
      if (schema.component === 'Divider') {
        componentProps = Object.assign({ type: 'horizontal' }, componentProps, {
          orientation: 'left',
          plain: true,
        })
      }
      return componentProps as Recordable
    })

    const getDisable = computed(() => {
      const { disabled: globDisabled } = props.formProps
      const { dynamicDisabled } = props.schema
      const { disabled: itemDisabled = false } = unref(getComponentsProps)
      let disabled = !!globDisabled || itemDisabled
      if (isBoolean(dynamicDisabled)) {
        disabled = dynamicDisabled
      }
      if (isFunction(dynamicDisabled)) {
        disabled = dynamicDisabled(unref(getValues))
      }
      return disabled
    })

    function getShow(): { isShow: boolean; isIfShow: boolean } {
      const { show, ifShow } = props.schema
      const { showAdvancedButton } = props.formProps
      const itemIsAdvanced = showAdvancedButton ? (isBoolean(props.isAdvanced) ? props.isAdvanced : true) : true

      let isShow = true
      let isIfShow = true

      if (isBoolean(show)) {
        isShow = show
      }
      if (isBoolean(ifShow)) {
        isIfShow = ifShow
      }
      if (isFunction(show)) {
        isShow = show(unref(getValues))
      }
      if (isFunction(ifShow)) {
        isIfShow = ifShow(unref(getValues))
      }
      isShow = isShow && itemIsAdvanced
      return { isShow, isIfShow }
    }

    function handleRules(): ValidationRule[] {
      const { rules: defRules = [], component, rulesMessageJoinLabel, label, dynamicRules, required } = props.schema

      if (isFunction(dynamicRules)) {
        return dynamicRules(unref(getValues)) as ValidationRule[]
      }

      let rules: ValidationRule[] = cloneDeep(defRules) as ValidationRule[]
      const { rulesMessageJoinLabel: globalRulesMessageJoinLabel } = props.formProps

      const joinLabel = Reflect.has(props.schema, 'rulesMessageJoinLabel')
        ? rulesMessageJoinLabel
        : globalRulesMessageJoinLabel
      const defaultMsg = createPlaceholderMessage(component) + `${joinLabel ? label : ''}`

      function validator(rule: any, value: any) {
        const msg = rule.message || defaultMsg
        if (value === undefined || isNull(value)) {
          // 空值
          return Promise.reject(msg)
        } else if (Array.isArray(value) && value.length === 0) {
          // 数组类型
          return Promise.reject(msg)
        } else if (typeof value === 'string' && value === '') {
          // 空字符串
          return Promise.reject(msg)
        } else if (
          typeof value === 'object' &&
          Reflect.has(value, 'checked') &&
          Reflect.has(value, 'halfChecked') &&
          Array.isArray(value.checked) &&
          Array.isArray(value.halfChecked) &&
          value.checked.length === 0 &&
          value.halfChecked.length === 0
        ) {
          // 非关联选择的tree组件
          return Promise.reject(msg)
        }
        return Promise.resolve()
      }

      const getRequired = isFunction(required) ? required(unref(getValues)) : required

      /*
       * 1、若设置了required属性，又没有其他的rules，就创建一个验证规则；
       * 2、若设置了required属性，又存在其他的rules，则只rules中不存在required属性时，才添加验证required的规则
       *     也就是说rules中的required，优先级大于required
       */
      if (getRequired) {
        if (!rules || rules.length === 0) {
          rules = [{ required: getRequired, validator }]
        } else {
          const requiredIndex: number = rules.findIndex((rule) => Reflect.has(rule, 'required'))

          if (requiredIndex === -1) {
            rules.push({ required: getRequired, validator })
          }
        }
      }

      const requiredRuleIndex: number = rules.findIndex(
        (rule) => Reflect.has(rule, 'required') && !Reflect.has(rule, 'validator')
      )

      if (requiredRuleIndex !== -1) {
        const rule = rules[requiredRuleIndex]
        const { isShow } = getShow()
        if (!isShow) {
          rule.required = false
        }
        if (component) {
          if (!Reflect.has(rule, 'type')) {
            rule.type = component === 'InputNumber' ? 'number' : 'string'
          }

          rule.message = rule.message || defaultMsg

          if (component.includes('Input') || component.includes('Textarea')) {
            rule.whitespace = true
          }
          const valueFormat = unref(getComponentsProps)?.valueFormat
          setComponentRuleType(rule, component, valueFormat)
        }
      }

      // Maximum input length rule check
      const characterInx = rules.findIndex((val) => val.max)
      if (characterInx !== -1 && !rules[characterInx].validator) {
        rules[characterInx].message =
          rules[characterInx].message || t('component.form.maxTip', [rules[characterInx].max] as Recordable)
      }
      return rules
    }

    function renderComponent() {
      const { renderComponentContent, component, field, changeEvent = 'change', valueField } = props.schema

      const isCheck = component && ['Switch', 'Checkbox'].includes(component)

      const eventKey = `on${upperFirst(changeEvent)}`

      const on = {
        [eventKey]: (...args: Nullable<Recordable>[]) => {
          const [e] = args
          if (propsData[eventKey]) {
            propsData[eventKey](...args)
          }
          const target = e ? e.target : null
          const value = target ? (isCheck ? target.checked : target.value) : e
          props.setFormModel(field, value, props.schema)
        },
      }
      const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>
      const { autoSetPlaceHolder, size } = props.formProps
      const propsData: Recordable = {
        allowClear: true,
        getPopupContainer: (trigger: Element) => trigger.parentNode,
        size,
        ...unref(getComponentsProps),
        disabled: unref(getDisable),
      }

      const isCreatePlaceholder = !propsData.disabled && autoSetPlaceHolder
      // RangePicker place is an array
      if (isCreatePlaceholder && component !== 'RangePicker' && component) {
        propsData.placeholder = unref(getComponentsProps)?.placeholder || createPlaceholderMessage(component)
      }
      propsData.codeField = field
      propsData.formValues = unref(getValues)

      const bindValue: Recordable = {
        [valueField || (isCheck ? 'checked' : 'value')]: props.formModel[field],
      }

      const compAttr: Recordable = {
        ...propsData,
        ...on,
        ...bindValue,
      }

      // TODO 由于直接通过绑定的方式无法将属性绑定到antdv的组件上 这里需要做很多很多的兼容
      if (!renderComponentContent) {
        if (!isCheck)
          return (
            <Comp
              // options
              value={compAttr.value}
              defaultValue={compAttr.defaultValue}
              size={compAttr.size}
              allowClear={compAttr.allowClear}
              autoFocus={compAttr.autoFocus}
              placeholder={compAttr.placeholder}
              disabled={compAttr.disabled}
              addonAfter={compAttr.addonAfter}
              addonBefore={compAttr.addonBefore}
              maxLength={compAttr.maxLength}
              prefix={compAttr.prefix}
              suffix={compAttr.suffix}
              type={compAttr.type}
              // events
              onPressEnter={compAttr.onPressEnter || {}}
              // Input.TextArea
              autosize={compAttr.autosize}
              //Input.Search
              enterButton={compAttr.enterButton}
              // Input.Group
              compact={compAttr.compact}
              // InputNumber
              formatter={compAttr.formatter}
              max={compAttr.max ?? 100}
              min={compAttr.min ?? 0}
              parser={compAttr.parser}
              precision={compAttr.precision}
              decimalSeparator={compAttr.decimalSeparator}
              step={compAttr.step}
              // options
              id={compAttr.id}
              // events
              onChange={compAttr.onChange}
              // common Api
              renderExtraFooter={compAttr.renderExtraFooter}
              mode={compAttr.mode}
              locale={compAttr.locale}
              format={compAttr.format}
              dropdownClassName={compAttr.dropdownClassName}
              suffixIcon={compAttr.suffixIcon}
              dateRender={compAttr.dateRender}
              disabledDate={compAttr.disabledDate}
              getCalendarContainer={compAttr.getCalendarContainer}
              popupStyle={compAttr.popupStyle}
              inputReadOnly={compAttr.inputReadOnly}
              align={compAttr.align}
              valueFormat={compAttr.valueFormat}
              showTime={compAttr.showTime}
              // common events
              //onOpenChange={compAttr.onOpenChange ?? {}}
              //onPanelChange={compAttr.onPanelChange ?? {}}
              //onOk={compAttr.onOk ?? {}}
              //DatePicker
              disabledTime={compAttr.disabledTime}
              showToday={compAttr.showToday}
              defaultPickerValue={compAttr.defaultPickerValue}
              // MonthPicker
              monthCellContentRender={compAttr.monthCellContentRender}
              // RangePicker
              ranges={compAttr.ranges}
              separator={compAttr.separator}
              calendarChange={compAttr.calendarChange}
              // common Api
              changeOnSelect={compAttr.changeOnSelect}
              fieldNames={compAttr.fieldNames}
              getPopupContainer={compAttr.getPopupContainer}
              loadData={compAttr.loadData}
              notFoundContent={compAttr.notFoundContent}
              options={compAttr.options}
              popupClassName={compAttr.popupClassName}
              popupPlacement={compAttr.popupPlacement}
              //popupVisible={compAttr.popupVisible}
              showSearch={compAttr.showSearch}
              // common events
              //onPopupVisibleChange={compAttr.onPopupVisibleChange ?? {}}
              //onSearch={compAttr.onSearch ?? {}}
              // options
              // events
              //  options
              loading={compAttr.loading}
              autoClearSearchValue={compAttr.autoClearSearchValue}
              defaultActiveFirstOption={compAttr.defaultActiveFirstOption}
              dropdownMatchSelectWidth={compAttr.dropdownMatchSelectWidth}
              dropdownRender={compAttr.dropdownRender}
              dropdownStyle={compAttr.dropdownStyle}
              dropdownMenuStyle={compAttr.dropdownMenuStyle}
              filterOption={compAttr.filterOption}
              firstActiveValue={compAttr.firstActiveValue}
              labelInValue={compAttr.labelInValue}
              maxTagCount={compAttr.maxTagCount}
              maxTagPlaceholder={compAttr.maxTagPlaceholder}
              maxTagTextLength={compAttr.maxTagTextLength}
              optionFilterProp={compAttr.optionFilterProp}
              optionLabelProp={compAttr.optionLabelProp}
              showArrow={compAttr.showArrow}
              removeIcon={compAttr.removeIcon}
              clearIcon={compAttr.clearIcon}
              menuItemSelectedIcon={compAttr.menuItemSelectedIcon}
              tokenSeparators={compAttr.tokenSeparators}
              defaultOpen={compAttr.defaultOpen}
              // events
              deselect={compAttr.deselect}
              inputKeydown={compAttr.inputKeydown}
              mouseenter={compAttr.mouseenter}
              mouseleave={compAttr.mouseleave}
              popupScroll={compAttr.popupScroll}
              search={compAttr.search}
              select={compAttr.select}
              dropdownVisibleChange={compAttr.dropdownVisibleChange}
              // options
              // events
              /**---------- a-checkbox,a-radio -------------*/
              indeterminate={compAttr.indeterminate}
              name={compAttr.name}
              // options
              // events
              /**---------- a-checkbox,a-radio -------------*/
              buttonStyle={compAttr.buttonStyle}
              /**---------- a-switch 这个点击会报错待处理-------------*/
              checkedChildren={compAttr.checkedChildren}
              unCheckedChildren={compAttr.unCheckedChildren}
              onOptionsChange={compAttr.onOptionsChange ?? {}}
              api={compAttr.api}
              params={compAttr.params}
              resultField={compAttr.resultField}
              labelField={compAttr.labelField}
              valueField={compAttr.valueField}
              immediate={compAttr.immediate}
              alwaysLoad={compAttr.alwaysLoad}
              afterFetch={compAttr.afterFetch}
              /**---------- rate -------------*/
              allowHalf={compAttr.allowHalf}
              /**---------- slide-------------*/
              marks={compAttr.marks ?? {}}
              range={compAttr.range ?? false}
              included={compAttr.range ?? false}
              vertical={compAttr.vertical ?? false}
            />
          )
        return (
          <Comp
            // options
            size={compAttr.size}
            disabled={compAttr.disabled}
            options={compAttr.options}
            checked={compAttr.checked}
            defaultChecked={compAttr.defaultChecked}
            autoFocus={compAttr.autoFocus}
            /**---------- a-checkbox,a-radio -------------*/
            buttonStyle={compAttr.buttonStyle}
            /**---------- a-switch 这个点击会报错待处理-------------*/
            checkedChildren={compAttr.checkedChildren}
            loading={compAttr.loading}
            unCheckedChildren={compAttr.unCheckedChildren}
            // options
            id={compAttr.id}
            // events
            onChange={compAttr.onChange}
            // options
            /**---------- a-checkbox,a-radio -------------*/
            indeterminate={compAttr.indeterminate}
            name={compAttr.name}
            // options
            // events
            afterFetch={compAttr.afterFetch}
            resultField={compAttr.afterFetch}
          />
        )
      }
      const compSlot = isFunction(renderComponentContent)
        ? { ...renderComponentContent(unref(getValues)) }
        : {
            default: renderComponentContent,
          }
      if (!isCheck)
        return (
          <Comp
            // options
            value={compAttr.value}
            defaultValue={compAttr.defaultValue}
            size={compAttr.size}
            allowClear={compAttr.allowClear}
            autoFocus={compAttr.autoFocus}
            placeholder={compAttr.placeholder}
            disabled={compAttr.disabled}
            addonAfter={compAttr.addonAfter}
            addonBefore={compAttr.addonBefore}
            maxLength={compAttr.maxLength}
            prefix={compAttr.prefix}
            suffix={compAttr.suffix}
            type={compAttr.type}
            // events
            onPressEnter={compAttr.onPressEnter || {}}
            // Input.TextArea
            autosize={compAttr.autosize}
            //Input.Search
            enterButton={compAttr.enterButton}
            // Input.Group
            compact={compAttr.compact}
            // InputNumber
            formatter={compAttr.formatter}
            max={compAttr.max ?? 100}
            min={compAttr.min ?? 0}
            parser={compAttr.parser}
            precision={compAttr.precision}
            decimalSeparator={compAttr.decimalSeparator}
            step={compAttr.step}
            // options
            id={compAttr.id}
            // events
            onChange={compAttr.onChange}
            // common Api
            renderExtraFooter={compAttr.renderExtraFooter}
            mode={compAttr.mode}
            locale={compAttr.locale}
            format={compAttr.format}
            dropdownClassName={compAttr.dropdownClassName}
            suffixIcon={compAttr.suffixIcon}
            dateRender={compAttr.dateRender}
            disabledDate={compAttr.disabledDate}
            getCalendarContainer={compAttr.getCalendarContainer}
            popupStyle={compAttr.popupStyle}
            inputReadOnly={compAttr.inputReadOnly}
            align={compAttr.align}
            valueFormat={compAttr.valueFormat}
            showTime={compAttr.showTime}
            // common events
            //onOpenChange={compAttr.onOpenChange ?? {}}
            //onPanelChange={compAttr.onPanelChange ?? {}}
            //onOk={compAttr.onOk ?? {}}
            //DatePicker
            disabledTime={compAttr.disabledTime}
            showToday={compAttr.showToday}
            defaultPickerValue={compAttr.defaultPickerValue}
            // MonthPicker
            monthCellContentRender={compAttr.monthCellContentRender}
            // RangePicker
            ranges={compAttr.ranges}
            separator={compAttr.separator}
            calendarChange={compAttr.calendarChange}
            // common Api
            changeOnSelect={compAttr.changeOnSelect}
            fieldNames={compAttr.fieldNames}
            getPopupContainer={compAttr.getPopupContainer}
            loadData={compAttr.loadData}
            notFoundContent={compAttr.notFoundContent}
            options={compAttr.options}
            popupClassName={compAttr.popupClassName}
            popupPlacement={compAttr.popupPlacement}
            //popupVisible={compAttr.popupVisible}
            showSearch={compAttr.showSearch}
            // common events
            //onPopupVisibleChange={compAttr.onPopupVisibleChange ?? {}}
            //onSearch={compAttr.onSearch ?? {}}
            // options
            // events
            //  options
            loading={compAttr.loading}
            autoClearSearchValue={compAttr.autoClearSearchValue}
            defaultActiveFirstOption={compAttr.defaultActiveFirstOption}
            dropdownMatchSelectWidth={compAttr.dropdownMatchSelectWidth}
            dropdownRender={compAttr.dropdownRender}
            dropdownStyle={compAttr.dropdownStyle}
            dropdownMenuStyle={compAttr.dropdownMenuStyle}
            filterOption={compAttr.filterOption}
            firstActiveValue={compAttr.firstActiveValue}
            labelInValue={compAttr.labelInValue}
            maxTagCount={compAttr.maxTagCount}
            maxTagPlaceholder={compAttr.maxTagPlaceholder}
            maxTagTextLength={compAttr.maxTagTextLength}
            optionFilterProp={compAttr.optionFilterProp}
            optionLabelProp={compAttr.optionLabelProp}
            showArrow={compAttr.showArrow}
            removeIcon={compAttr.removeIcon}
            clearIcon={compAttr.clearIcon}
            menuItemSelectedIcon={compAttr.menuItemSelectedIcon}
            tokenSeparators={compAttr.tokenSeparators}
            defaultOpen={compAttr.defaultOpen}
            // events
            deselect={compAttr.deselect}
            inputKeydown={compAttr.inputKeydown}
            mouseenter={compAttr.mouseenter}
            mouseleave={compAttr.mouseleave}
            popupScroll={compAttr.popupScroll}
            search={compAttr.search}
            select={compAttr.select}
            dropdownVisibleChange={compAttr.dropdownVisibleChange}
            // options
            // events
            /**---------- a-checkbox,a-radio -------------*/
            indeterminate={compAttr.indeterminate}
            name={compAttr.name}
            // options
            // events
            /**---------- a-checkbox,a-radio -------------*/
            buttonStyle={compAttr.buttonStyle}
            /**---------- a-switch 这个点击会报错待处理-------------*/
            checkedChildren={compAttr.checkedChildren}
            unCheckedChildren={compAttr.unCheckedChildren}
            onOptionsChange={compAttr.onOptionsChange ?? {}}
            api={compAttr.api}
            params={compAttr.params}
            resultField={compAttr.resultField}
            labelField={compAttr.labelField}
            valueField={compAttr.valueField}
            immediate={compAttr.immediate}
            alwaysLoad={compAttr.alwaysLoad}
            afterFetch={compAttr.afterFetch}
            /**---------- rate -------------*/
            allowHalf={compAttr.allowHalf}
            /**---------- slide-------------*/
            marks={compAttr.marks ?? []}
            range={compAttr.range}
          >
            {() => compSlot}
          </Comp>
        )
      return (
        <Comp
          // options
          size={compAttr.size}
          disabled={compAttr.disabled}
          options={compAttr.options}
          checked={compAttr.checked}
          defaultChecked={compAttr.defaultChecked}
          autoFocus={compAttr.autoFocus}
          /**---------- a-checkbox,a-radio -------------*/
          buttonStyle={compAttr.buttonStyle}
          /**---------- a-switch 这个点击会报错待处理-------------*/
          checkedChildren={compAttr.checkedChildren}
          loading={compAttr.loading}
          unCheckedChildren={compAttr.unCheckedChildren}
          // options
          id={compAttr.id}
          // events
          onChange={compAttr.onChange}
          // options
          /**---------- a-checkbox,a-radio -------------*/
          api={compAttr.api}
          indeterminate={compAttr.indeterminate}
          name={compAttr.name}
          resultField={compAttr.resultField}
          afterFetch={compAttr.afterFetch}
        >
          {() => compSlot}
        </Comp>
      )
    }

    function renderLabelHelpMessage() {
      const { label, helpMessage, helpComponentProps, subLabel } = props.schema
      const renderLabel = subLabel ? (
        <span>
          {label} <span class="text-secondary">{subLabel}</span>
        </span>
      ) : (
        label
      )
      const getHelpMessage = isFunction(helpMessage) ? helpMessage(unref(getValues)) : helpMessage
      if (!getHelpMessage || (Array.isArray(getHelpMessage) && getHelpMessage.length === 0)) {
        return renderLabel
      }
      return (
        <span>
          {renderLabel}
          <BasicHelp placement="top" class="mx-1" text={getHelpMessage} {...helpComponentProps} />
        </span>
      )
    }

    function renderItem() {
      const { itemProps, slot, render, field, suffix, component, required } = props.schema
      const { labelCol, wrapperCol } = unref(itemLabelWidthProp)
      const { colon, labelAlign } = props.formProps

      if (component === 'Divider') {
        const componentProps = unref(getComponentsProps)
        return (
          <Col span={24}>
            <Divider dashed={componentProps.dashed} orientation={componentProps.orientation} type={componentProps.type}>
              {renderLabelHelpMessage()}
            </Divider>
          </Col>
        )
      } else {
        const getContent = () => {
          return slot ? getSlot(slots, slot, unref(getValues)) : render ? render(unref(getValues)) : renderComponent()
        }
        const showSuffix = !!suffix
        const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix
        return (
          <FormModel.Item
            name={field}
            prop={field}
            colon={colon}
            ref={fieldRef}
            class={{ 'suffix-item': showSuffix }}
            {...(itemProps as Recordable)}
            hasFeedback={itemProps?.hasFeedback}
            htmlFor={itemProps?.htmlFor}
            labelAlign={itemProps?.labelAlign ?? labelAlign}
            required={required}
            validateStatus={itemProps?.validateStatus}
            label={renderLabelHelpMessage()}
            rules={handleRules()}
            labelCol={labelCol}
            wrapperCol={wrapperCol}
          >
            <div style="display:flex">
              <div style="flex:1;">{getContent()}</div>
              {showSuffix && <span class="suffix">{getSuffix}</span>}
            </div>
          </FormModel.Item>
        )
      }
    }

    return () => {
      const { colProps = {}, colSlot, renderColContent, component } = props.schema
      if (!componentMap.has(component)) {
        return null
      }

      const { baseColProps = {} } = props.formProps
      const realColProps = { ...baseColProps, ...colProps }
      const { isIfShow, isShow } = getShow()
      const values = unref(getValues)

      const getContent = () => {
        return colSlot ? getSlot(slots, colSlot, values) : renderColContent ? renderColContent(values) : renderItem()
      }
      return (
        isIfShow && (
          <Col
            {...realColProps}
            flex={realColProps.flex}
            offset={realColProps.offset}
            order={realColProps.order}
            pull={realColProps.pull}
            push={realColProps.push}
            span={realColProps.span ?? 8}
            xs={realColProps.xs}
            sm={realColProps.sm}
            md={realColProps.md}
            lg={realColProps.lg}
            xl={realColProps.xl}
            xxl={realColProps.xxl}
            v-show={isShow}
          >
            {getContent()}
          </Col>
        )
      )
    }
  },
})
</script>
